<template>
    <div>
        <Row class="toolBar" justify="space-between">
            <i-col span="12">
                <Tooltip  content="查看详细" placement="bottom-start" transfer>
                    <Button type="ghost" >
                        <Icon type="clipboard"></Icon>
                    </Button>
                </Tooltip>
            </i-col>
            <i-col span="12">
                <Button-group style="float: right;">
                    <Tooltip content="刷新" placement="bottom-start" transfer>
                        <Button type="ghost" @click="refresh">
                            <Icon type="loop"></Icon>
                        </Button>
                    </Tooltip>
                    <Tooltip content="导出全部数据" placement="bottom-start" transfer>
                        <Button type="ghost" @click="exportData(1)">
                            <Icon type="arrow-down-a"></Icon>
                        </Button>
                    </Tooltip>
                    <Tooltip content="导出当前页数据" placement="bottom-start" transfer>
                        <Button type="ghost" @click="exportData(2)">
                            <Icon type="ios-download-outline"></Icon>
                        </Button>
                    </Tooltip>
                    </Button-group>
                    <Input v-model="searchKey" icon="ios-search-strong" placeholder="请输入..." style="width:200px;float:right;">
                    </Input>
            </i-col>
        </Row>
        <Table ref="table2" 
            highlight-row 
            :loading="loading"  :pageSize="15"
            :columns="colums" :data="dataAll">
        </Table>
    </div>
</template>

<script>
    export default {
        // 回款款记录
        name: 'receiv',
        data () {
            return {
                colums: [
                     {
                        type: "index",
                        width: 60,
                        align: "center",
                        title: "排序"
                    },
                    {
                        title: "订单名称",
                        key: "name"
                    },
                    {
                        title: "应回款项",
                        key: "count"
                    },
                    {
                        title: "操作",
                        render: (h, params) => {
                            return h('Button', {
                                props: {
                                    type: "info",
                                    size: "small"
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.go2item(params.row.order_id)
                                    }
                                }
                            }, "查看回款项")
                        }
                    }
                ],
                loading: false,
                dataAll: [],
                searchKey: ""
            }
        },
        methods: {
            getAll() {
                this.$api.getReceivGroupByBuyId().then(res => {
                    if (!res.error) {
                        this.dataAll = res.Data
                    } else {
                        this.$Message.error(res.message);
                    }
                    this.loading = false;
                })
            },
            go2item(id) {
                console.debug(id)
                this.$router.push({
                    name: '回款明细',
                    params: {
                        BusyId: id
                    }
                })
            },
            refresh() {
                this.getAll()
            },
            exportData(type) {
                if (type === 1) {
                    this.$refs.table2.exportCsv({
                    filename: "原始数据",
                    quoted: true
                    //            columns: this.columns.filter((col, index) => index < 5),
                    //            data: this.thisTableData,
                    });
                } else if (type === 2) {
                    this.$refs.table2.exportCsv({
                    filename: "排序和过滤后的数据",
                    original: false,
                    quoted: true
                    });
                }
            },
        },
        mounted () {
            this.getAll()
        }
    }
</script>

<style scoped>

</style>